import { Form, Select, Input, Row, Col, DatePicker, Tooltip } from 'antd';
import _ from 'lodash';
import moment from 'moment';
import React from 'react';

import HeaderRenderer from '@/components/BaseTable/HeaderRenderer';

const SUB_TITLE_ENM = {
  marketing: {
    title1: '运营意见',
    title2: '营销意见',
    desc: 'operationOpinionDesc',
    desc1: 'operationSuggest',
  },
  operation: {
    title1: '营销意见',
    title2: '运营意见',
    desc: 'marketingOpinionDesc',
    desc1: 'marketingSuggest',
  },
};
// 专业意见
function FormProfessionalAdvice({ data, form }) {
  if (_.isEmpty(data) || !data?.position) return null;
  const { getFieldDecorator } = form;
  const pageType = data?.position;
  return (
    <Row>
      {/* 反馈意见 */}
      <Col span={24} className="sub-title">
        {SUB_TITLE_ENM[pageType]?.title1}
      </Col>
      <Col span={24}>
        <Form.Item label="督办发起建议">
          {/* {getFieldDecorator(SUB_TITLE_ENM[pageType]?.desc1, {
            initialValue: data[SUB_TITLE_ENM[pageType]?.desc1],
          })(<span>{data[SUB_TITLE_ENM[pageType]?.desc1] || '等待反馈'}</span>)} */}
          <span>{data[SUB_TITLE_ENM[pageType]?.desc1] || '等待反馈'}</span>
        </Form.Item>
      </Col>
      <Col>
        <Form.Item label="意见说明">
          {/* {getFieldDecorator(SUB_TITLE_ENM[pageType]?.desc, {
            initialValue: data[SUB_TITLE_ENM[pageType]?.desc],
          })(<span>{data[SUB_TITLE_ENM[pageType]?.desc] || '等待反馈'}</span>)} */}
          <span>{data[SUB_TITLE_ENM[pageType]?.desc] || '等待反馈'}</span>
        </Form.Item>
      </Col>
      {/* 填写意见 */}
      <Col span={24} className="sub-title">
        {SUB_TITLE_ENM[pageType]?.title2}
      </Col>
      <Col span={24}>
        <Form.Item label="督办发起建议" style={{ height: 40 }}>
          {getFieldDecorator(`${pageType}Suggest`, {
            initialValue: data[`${pageType}Suggest`] || undefined,
            rules: [{ required: true, message: '请选择你的建议!' }],
          })(
            <Select size="small" style={{ width: 180 }} placeholder="选择一项督办建议">
              <Select.Option value="建议发起督办">建议发起督办</Select.Option>
              <Select.Option value="不建议发起督办">不建议发起督办</Select.Option>
              <Select.Option value="无建议">无建议</Select.Option>
            </Select>,
          )}
        </Form.Item>
      </Col>
      <Col span={24}>
        <Form.Item label="意见说明" style={{ display: 'flex' }}>
          {getFieldDecorator(`${pageType}OpinionDesc`, {
            initialValue: data[`${pageType}OpinionDesc`] || undefined,
            rules: [{ required: true, message: '请填写你的意见!', whitespace: true }],
          })(
            <Input.TextArea
              placeholder="填写意见说明..."
              autoSize={{ minRows: 2, maxRows: 6 }}
              style={{ width: 'calc( 100vw - 236px )', display: 'block' }}
            />,
          )}
        </Form.Item>
      </Col>
    </Row>
  );
}

// 督办信息
function FormSuperviseInfo({ data, form }) {
  const { getFieldDecorator } = form;
  return (
    <Row type="flex" gutter={[0, 10]} style={{ marginTop: 0 }}>
      <Col span={8}>
        <Form.Item label="填报人">{data?.warnConfirmInfo?.fillPeople || '-'}</Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="督办人">{data?.warnConfirmInfo?.overseePeople || '-'}</Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="被督办人">{data?.warnConfirmInfo?.byOverseePeople || '-'}</Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="任务来源">{data?.warnConfirmInfo?.taskSource || '-'}</Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="主办职能">{data?.warnConfirmInfo?.mainFunction || '-'}</Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="反馈周期">
          {getFieldDecorator('feedbackLoop', {
            initialValue: data?.warnConfirmInfo?.feedbackLoop || '按天',
          })(
            <span>
              {data?.warnConfirmInfo?.feedbackLoop || '按天'}&nbsp;(每
              {data?.warnConfirmInfo?.feedbackLoopCount || 3}
              天反馈一次)
            </span>,
          )}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="优先级">
          <HeaderRenderer type="approval">
            {getFieldDecorator('priority', {
              initialValue: data?.warnConfirmInfo?.priority || undefined,
              rules: [{ required: true, message: '请选择优先级!' }],
            })(
              <Select style={{ width: 200 }} size="small">
                <Select.Option value="常规">常规</Select.Option>
                <Select.Option value="重要">重要</Select.Option>
                <Select.Option value="紧急">紧急</Select.Option>
                <Select.Option value="重要紧急">重要紧急</Select.Option>
              </Select>,
            )}
          </HeaderRenderer>
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="督办完成时间">
          {getFieldDecorator('finishTime', {
            initialValue: moment(data?.warnConfirmInfo?.finishTime) || moment(),
            rules: [{ required: true, message: '督办完成时间!' }],
          })(<DatePicker allowClear={false} size="small" showTime />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="完成标准">
          {getFieldDecorator('completionCriteria', {
            initialValue: data?.warnConfirmInfo?.completionCriteria || undefined,
            // rules: [{ required: true, message: '请选择完成标准!' }],
          })(
            <span>{data?.warnConfirmInfo?.completionCriteria || '以汇报结果会议纪要为准'}</span>,
            // <Select style={{ width: 200 }} size="small">
            //   <Select.Option value="以汇报结果会议纪要为准">以汇报结果会议纪要为准</Select.Option>
            //   <Select.Option value="以相关事项审批完成为准">以相关事项审批完成为准</Select.Option>
            //   <Select.Option value="以支付相关成果为准">以支付相关成果为准</Select.Option>
            //   <Select.Option value="以系统截图为准">以系统截图为准</Select.Option>
            // </Select>,
          )}
        </Form.Item>
      </Col>
      <Col span={24}>
        <Form.Item label="完成标准描述">
          {getFieldDecorator('completionCriteriaDesc', {
            initialValue: data?.warnConfirmInfo?.completionCriteriaDesc || undefined,
          })(
            <>
              {data?.warnConfirmInfo?.completionCriteriaDesc?.split('<br>')?.map((item, idx) => {
                if (item && item !== '') {
                  return (
                    <Tooltip title={item} placement="topLeft" trigger="click" key={idx}>
                      <div className="ellipsis" style={{ width: '1100px' }}>
                        {idx === 0 ||
                        idx === data?.warnConfirmInfo?.completionCriteriaDesc?.length - 1
                          ? ''
                          : `${idx}、`}
                        {item}
                      </div>
                    </Tooltip>
                  );
                }
                return null;
              })}
            </>,
          )}
        </Form.Item>
      </Col>
      <Col span={24}>
        <Form.Item label={<></>} colon={false}>
          <div style={{ display: 'flex' }}>
            <span>督办完成要求：</span>
            {getFieldDecorator('finishAsk', {
              initialValue: data?.warnConfirmInfo?.finishAsk || undefined,
            })(
              <Input.TextArea
                placeholder="请对本条审批作补充解释..."
                autoSize={{ minRows: 2, maxRows: 6 }}
                style={{ width: 'calc( 100vw - 320px )', display: 'block' }}
              />,
            )}
          </div>
          <div style={{ display: 'flex' }}>
            <span>数据来源：</span>
            <a rel="noopener noreferrer" target="_blank" href={data?.warnConfirmInfo?.url || '#'}>
              点击查看货值审批单 &raquo;
            </a>
          </div>
        </Form.Item>
      </Col>
    </Row>
  );
}

export { FormProfessionalAdvice, FormSuperviseInfo };
